﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "入职申请审核列表";
    Layout = null;
}
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.min.css">
<div class="layui-container" style="margin-top:30px;">
    <div style="margin-bottom:15px;">
        <h2 style="display:inline-block;">入职申请审核列表</h2>
    </div>
    <form class="layui-form" id="searchForm" lay-filter="searchForm" style="margin-bottom:20px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">人员名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="personName" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">面试官</label>
                <div class="layui-input-inline">
                    <input type="text" name="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="reviewTable" lay-filter="reviewTable"></table>
    <div id="pagination" style="text-align:center;margin-top:20px;"></div>
</div>

<!-- 表格上方工具栏 -->
<script type="text/html" id="tableToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchDel">批量删除</button>
    </div>
</script>

<!-- 编辑弹框 -->
<div id="editModal" style="display:none; padding:20px;">
    <form class="layui-form" id="editForm" lay-filter="editForm">
        @Html.AntiForgeryToken()
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">人员名称</label>
            <div class="layui-input-block">
                <input type="text" name="personName" required lay-verify="required" placeholder="请输入人员名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">定级</label>
            <div class="layui-input-block">
                <input type="text" name="gradingMatch" placeholder="请输入定级" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面试反馈</label>
            <div class="layui-input-block">
                <input type="text" name="interviewFeedback" placeholder="请输入面试反馈" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面试结果</label>
            <div class="layui-input-block">
                <select name="interviewResult">
                    <option value="通过">通过</option>
                    <option value="未通过">未通过</option>
                    <option value="待定">待定</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面试次数</label>
            <div class="layui-input-block">
                <input type="text" name="nterviewNumber" placeholder="请输入面试次数" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面试时间</label>
            <div class="layui-input-block">
                <input type="text" id="interviewTimeEdit" name="interviewTime" placeholder="请选择面试时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面试官</label>
            <div class="layui-input-block">
                <input type="text" name="interviewPeople" placeholder="请输入面试官" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editSubmit">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelEdit">取消</button>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    layui.use(['table', 'form', 'laypage', 'layer', 'laydate'], function(){
        var table = layui.table,
            form = layui.form,
            laypage = layui.laypage,
            layer = layui.layer,
            laydate = layui.laydate;
        var limit = 10, page = 1, total = 0;

        function renderTable(data){
            table.render({
                elem: '#reviewTable',
                // 1. 加toolbar
                toolbar: '#tableToolbar',
                // 2. 加checkbox列
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'id', title:'序号', width:80},
                    {field:'personName', title:'人员名称'},
                    {field:'phone', title:'联系电话'},
                    {field:'sex', title:'性别', width:80, templet: d => d.sex === 0 ? '男' : '女'},
                    {field:'gradingMatch', title:'定级'},
                    {field:'interviewFeedback', title:'面试反馈'},
                    {field:'interviewResult', title:'面试结果', width:100, templet: function(d){
                        var color = '';
                        switch(d.interviewResult) {
                            case '通过':
                                color = 'layui-bg-green';
                                break;
                            case '未通过':
                                color = 'layui-bg-red';
                                break;
                            case '待定':
                                color = 'layui-bg-gray';
                                break;
                            default:
                                color = 'layui-bg-gray';
                        }
                        return '<span class="layui-badge ' + color + '">' + (d.interviewResult || '未设置') + '</span>';
                    }},
                    {field:'nterviewNumber', title:'面试次数'},
                    {field:'interviewTime', title:'面试时间', width:160, templet: d => d.interviewTime ? d.interviewTime.replace('T',' ').substring(0,16) : ''},
                    {field:'interviewPeople', title:'面试官'},
                    {title:'操作', width:120, templet: function(d){
                        return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>' +
                               '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                    }}
                ]],
                data: data,
                page: false,
                limit: limit,
                text: {none: '暂无数据'}
            });
        }

        function loadData(curr){
            var params = form.val('searchForm');
            $.get('/OnboardingReview/GetOnboardingReviewList', {
                page: curr || 1,
                limit: limit,
                personName: params.personName,
                interviewPeople: params.interviewPeople
            }, function(res){
                total = res.count || 0;
                renderTable(res.data || []);
                laypage.render({
                    elem: 'pagination',
                    count: total,
                    limit: limit,
                    curr: curr || 1,
                    layout: ['prev', 'page', 'next', 'skip'],
                    jump: function(obj, first){
                        if(!first){
                            loadData(obj.curr);
                        }
                    }
                });
            });
        }

        // 初始加载
        loadData(1);

        // 查询
        form.on('submit(searchBtn)', function(data){
            loadData(1);
            return false;
        });

        // 监听头工具栏事件（批量删除）
        table.on('toolbar(reviewTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchDel':
                    var data = checkStatus.data;
                    if(data.length === 0){
                        layer.msg('请选择要删除的行');
                        return;
                    }
                    var ids = data.map(item => item.id);
                    layer.confirm('确定删除选中的 '+ data.length +' 条数据吗？', function(index){
                        var postData = { ids: ids };
                        // 如果有防伪token可加上
                        // postData.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
                        $.ajax({
                            url: '/OnboardingReview/BatchDeleteOnboardingReview',
                            type: 'POST',
                            data: postData,
                            traditional: true, // 关键，保证数组正确传递
                            success: function(res){
                                if(res.success){
                                    layer.msg('批量删除成功');
                                    loadData(1);
                                } else {
                                    layer.msg('批量删除失败');
                                }
                            },
                            error: function(){
                                layer.msg('请求失败');
                            }
                        });
                        layer.close(index);
                    });
                    break;
            }
        });

        // 监听表格工具条（单条删除和编辑）
        table.on('tool(reviewTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除这条记录吗？', function(index){
                    // 这里可以发送删除请求
                    var postData = { id: data.id };
                    // postData.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
                    $.ajax({
                        url: '/OnboardingReview/DeleteOnboardingReview',
                        type: 'POST',
                        data: postData,
                        success: function(res){
                            if(res.success){
                                layer.msg('删除成功');
                                loadData(1);
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function(){
                            layer.msg('请求失败');
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                layui.use(['form', 'layer'], function(){
                    var form = layui.form, layer = layui.layer;
                    // 克隆弹框表单并赋唯一id，插入body
                    var $modal = $('#editModal').clone().attr('id', 'editModal_temp').show();
                    $('body').append($modal);
                    // 反填数据
                    $modal.find('input[name="id"]').val(data.id);
                    $modal.find('input[name="personName"]').val(data.personName);
                    $modal.find('input[name="phone"]').val(data.phone);
                    $modal.find('select[name="sex"]').val(data.sex);
                    $modal.find('input[name="gradingMatch"]').val(data.gradingMatch);
                    $modal.find('input[name="interviewFeedback"]').val(data.interviewFeedback);
                    $modal.find('select[name="interviewResult"]').val(data.interviewResult);
                    $modal.find('input[name="nterviewNumber"]').val(data.nterviewNumber);
                    var interviewTime = data.interviewTime;
                    if (interviewTime && interviewTime.indexOf('T') > 0) {
                        interviewTime = interviewTime.split('T')[0]; // 只保留日期部分
                    }
                    $modal.find('input[name="interviewTime"]').val(interviewTime);
                    $modal.find('input[name="interviewPeople"]').val(data.interviewPeople);
                    form.render();
                    // 弹出弹框
                    var index = layer.open({
                        type: 1,
                        title: '编辑入职申请',
                        area: ['500px', 'auto'],
                        content: $modal,
                        end: function(){
                            $modal.remove();
                        },
                        success: function(){
                            layui.use('laydate', function(){
                                var laydate = layui.laydate;
                                laydate.render({
                                    elem: '#editModal_temp input[name="interviewTime"]',
                                    type: 'date',
                                    trigger: 'click'
                                });
                            });
                        }
                    });
                    // 取消按钮
                    $modal.find('#cancelEdit').off('click').on('click', function(){
                        layer.close(index);
                    });
                });
            }
        });

        // 重置按钮点击事件
        $('button[type="reset"]').click(function(){
            setTimeout(function(){
                loadData(1);
            }, 0);
        });

        // 弹框表单提交
        form.on('submit(editSubmit)', function(formData){
            // 类型转换
            formData.field.sex = parseInt(formData.field.sex, 10);
            formData.field.nterviewNumber = parseInt(formData.field.nterviewNumber, 10);
            // 日期格式处理（如果后端需要）
            // formData.field.interviewTime = formData.field.interviewTime.replace(' ', 'T');
            formData.field.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();
            $.ajax({
                url: '/OnboardingReview/UpdateOnboardingReview',
                type: 'POST',
                data: formData.field,
                success: function(res){
                    console.log(res); // 打印后端返回
                    if(res.success || res.code == 0){
                        layer.msg('修改成功');
                        layer.closeAll();
                        loadData(1);
                    } else {
                        layer.msg('修改失败: ' + (res.msg || res.message || '未知错误'));
                    }
                },
                error: function(xhr){
                    console.log(xhr.responseText); // 打印详细错误
                    layer.msg('请求失败: ' + xhr.responseText);
                }
            });
            return false;
        });

        // 初始化日期选择器
        laydate.render({
            elem: '#interviewTimeEdit',
            type: 'date',
            trigger: 'click'
        });
    });

    $(function() {
        layui.use(['form'], function(){
            var form = layui.form;
            form.render();
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        layui.use(['form'], function(){
            var form = layui.form;
            setTimeout(function(){
                form.render(); // 强制渲染所有表单
            }, 0);
        });
    });
</script>
